<template>
  <div class="Home" name="Home">
    <header>
      <p>中原中路</p>
      <myheader></myheader>
    </header>
    <van-grid :border="false" :column-num="5">
      <van-grid-item v-for="(item,index) in list" :icon="item.img" :text="item.content"/>
    </van-grid>
    <my-magnify v-for="(item,index) in list" :previewImg="item.img" :zoomImg="item.img"></my-magnify>
  </div>
</template>
<script>
import headers from "@/components/headers";
import MyMagnify from "@/components/Magnify.vue";

export default {
  name: 'Home',
  data() {
    return {
      list: [],
      data: {
        min:
            "https://img.alicdn.com/imgextra/i3/2857774462/TB21fgcwwNlpuFjy0FfXXX3CpXa_!!2857774462.jpg_430x430q90.jpg",
        max:
            "https://img.alicdn.com/imgextra/i3/2857774462/TB21fgcwwNlpuFjy0FfXXX3CpXa_!!2857774462.jpg"
      }

    };
  },
  // 子组件转换
  components: {
    MyMagnify,
    myheader: headers,
  },
  // 数据引入
  mounted() {
  },
  created() {
    this.$axios({
      url: './list.json'
    }).then(res => {
      let list = res.data.arr
      this.list = list
    })
  },
  //点击函数事件
  methods: {},
  //计算事件
  computed: {},
  //数据监听
  watch: {},
  //过滤器
  filters: {},
  //设定自定义指令
  directives: {},
}
</script>
<style lang="scss" scoped>
header {
  display: flex;
  flex-direction: column;
  background: #008EFF;

  p {
    display: block;
    width: 100vw;
    height: 30px;
    text-align: left;
    padding: 5px 10px;
    font-size: 18px;
    color: #fff;
    box-sizing: border-box;
  }

  margin-bottom: 20px;
}

/deep/ {
  .van-search {
    background: #008EFF;
  }

  .magnify {
    display: flex;
    flex-direction: row;
  }

  .preview-box {
    width: 30vw;

    img {
      width: 30vw
    }
  }

  .zoom-box {
    width: 50vw;
  }

  .magnify .preview-box .hover-box[data-v-3ca8d521] {
    width: 50px;
    height:50px;
  }
  .magnify .preview-box[data-v-3ca8d521] {
    width: 100px;
    height: 100px;
    img{
      width: 100%;
    }
  }
  .magnify .zoom-box[data-v-3ca8d521] {
    width: 150px;
    height: 150px;
  }
  .magnify .zoom-box img[data-v-3ca8d521]{
    width: 500px;
    height: 500px;
  }
  .magnify .zoom-box[data-v-3ca8d521] {
    position: absolute;
    left: 100px;
    top: 0;
  }
}
</style>
